<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <!-- 引入layui核心样式 -->
    <link rel="stylesheet" href="../../lib/layui/css/layui.css"/>
    <!-- 引入layui核心JS-->
    <script src="../../lib/layui/layui.js"></script>
    <style>
        body {
            /*background-image: url("../../img/bg.jpeg");*/
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
            background-position: center;
        }
        .layui-card {
            opacity: .7;
        }

        marquee {
            font-size: 18px;
            color: #2f363c;
        }

        /* 整体容器样式，模拟layui卡片风格，设置背景、边框、阴影和内边距等 */
        .user-info-container {
            background-color: #fff;
            border: 1px solid #e6e6e6;
            border-radius: 2px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* 内部信息包裹的div样式，设置为flex布局，方便排列内部元素 */
        .user-info-container>div {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* 每一行信息的样式（p标签包裹部分），设置为flex布局来分列左右显示 */
        .user-info-container p {
            display: flex;
            align-items: center;
            font-size: 20px;
            color: #333;
        }

        /* 左边提示文字的样式，设置固定宽度、右对齐、加粗 */
        .left {
            width: 120px;
            text-align: right;
            font-weight: bold;
            margin-right: 10px;
        }

        /* 右边展示具体内容的样式，让其能自适应宽度 */
        .right {
            flex: 1;
            text-align: left;
        }

        /* 单独设置当前时间显示区域（id为nowTime）的样式，增加一些间隔、字体样式等 */
        #nowTime {
            font-size: 24px;
            color: #666;
            text-align: right;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="layui-card layui-panel" style="margin: 15px">
    <div class="layui-card-header">
        <marquee>欢迎使用超市订单管理系统</marquee>
    </div>
    <div class="layui-card-body">
        <div class="user-info-container">
            <div>
                <p>
                    <span class="left">用户：</span>
                    <span class="right" id="username">系统管理员</span>
                </p>
                <p>
                    <span class="left">登录时间：</span>
                    <span class="right" id="login-time">2024-12-25 12:00:00</span>
                </p>
                <p>
                    <span class="left">超时时间：</span>
                    <span class="right" id="time-out">10分钟</span>
                </p>
            </div>
            <div id="nowTime">
                2024年12月25日 12:00:00 星期三
            </div>
        </div>
    </div>
</div>
</body>
<script>
    // 获取layui内置模块
    let $ = layui.$

    layui.use(function () {
        changeBackground()
        getLoginInfo()
        showNowTime()
    })

    /**
     * 根据时间切换背景
     */
    function changeBackground() {
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        if (year === 2025 && month === 1) {
            $('body').css('background-image', 'url("../../img/newyear.jpeg")')
        } else {
            $('body').css('background-image', 'url("../../img/bg.jpeg")')
        }
    }

    /**
     * 获取当前登录用户的信息
     */
    function getLoginInfo() {
        $.get('/soms/server/auth?type=loginInfo', function (result) {
            if (result.code === 200) {
                $('#username').text(result.data.loginUser.userName)
                $('#login-time').text(result.data.loginTime)
                $('#time-out').text(result.data.timeout / 60 + '分钟')
            } else {
                // 401，退出登录回到登录页
                parent.location.href = '../../no_auth.html'
            }
        })
    }

    /**
     * 显示当前时间，每个一秒钟刷新
     */
    function showNowTime() {
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let hour = date.getHours()
        let minute = date.getMinutes()
        let second = date.getSeconds()
        let dayOfWeek = date.getDay()
        switch (dayOfWeek) {
            case 0:
                dayOfWeek = "日"
                break
            case 1:
                dayOfWeek = "一"
                break
            case 2:
                dayOfWeek = "二"
                break
            case 3:
                dayOfWeek = "三"
                break
            case 4:
                dayOfWeek = "四"
                break
            case 5:
                dayOfWeek = "五"
                break
            case 6:
                dayOfWeek = "六"
                break
        }
        let nowTime = year + '年' + toTwo(month) + '月' + toTwo(day) + '日'
        nowTime += ' ' + toTwo(hour) + ':' + toTwo(minute) + ':' + toTwo(second)
        nowTime += ' 星期' + dayOfWeek
        $('#nowTime').text(nowTime)
        setTimeout(showNowTime, 1000)
    }

    /**
     * 十位数补零
     * @param number
     * @returns {*|string}
     */
    function toTwo(number) {
        if (number < 10) {
            return '0' + number
        } else {
            return number
        }
    }
</script>
</html>